import React from 'react';
import { View, Image, getLaunchOptionsSync, device } from '@ray-js/ray';
import { useActions } from '@ray-js/panel-sdk';
import { Button } from '../Button';
import styles from './index.module.less';

const { openTimerPage } = device;

// 启动参数中获取设备 id
const {
  query: { deviceId },
} = getLaunchOptionsSync();

export const ControlBar = () => {
  const actions = useActions();

  const handleTogglePower = React.useCallback(() => {
    // openTimerPage({
    //   deviceId,
    //   category: 'timer',
    //   repeat: 1,
    //   data: [
    //     {
    //       dpName: '开关',
    //       dpId: 1,
    //       rangeKeys: [true, false],
    //       rangeValues: ['开', '关'],
    //     },
    //   ],
    //   success: () => {
    //     console.log('openTimerPage success');
    //   },
    //   fail: error => {
    //     console.log('openTimerPage fail', error);
    //   },
    // });
  }, []);

  return (
    <View className={styles.container}>
      <Image className={styles.bg} mode="aspectFill" src="/images/bottom_dark.png" />
      <Button
        img="/images/power.png"
        onClick={handleTogglePower}
        imgClassName={styles.powerBtn}
        className={styles.powerBox}
      />
    </View>
  );
};

ControlBar.height = 103;
